<template>
    <div class="claimSettlementBoard">
        <!-- 面包屑导航 -->
        <div class="page_top">
            <div class="left_btn" @click="back">
                <img src="../../assets/image/back.png" alt="" />
            </div>
            <crumbs basetitle="工具" title="理赔率看板"></crumbs>
        </div>
        <div class="tab-box flex">
            <div
                class="tab-item pointer"
                :class="{ active: curTab === 1 }"
                @click="changeTab(1)"
            >
                <div class="name">派遣单位理赔率</div>
            </div>
            <div
                class="tab-item pointer"
                :class="{ active: curTab === 2 }"
                @click="changeTab(2)"
            >
                <div class="name">企业理赔率</div>
            </div>
            <div
                class="tab-item pointer"
                :class="{ active: curTab ===3 }"
                @click="changeTab(3)"
            >
                <div class="name">保司理赔率</div>
            </div>
        </div>
        <div v-if="curTab === 1" class="paddingbox">
            <div class="claimSettlementBoardbox">
                <div class="claimSettlementBoardboxitem longclaimSettlementBoardbox">
                    <div class="claimSettlementBoardboxitem_top">
                        <div class="topinsurename">长期保理赔</div>
                        <div></div>
                    </div>
                    <div class="claimSettlementBoardboxitem_bottom">
                        <div class="bottom_info">
                            <div class="bottom_info_t">
                                <div class="t_text">总案件数</div>
                                <!-- <div class="triangleup" v-show="false"></div>
                                <div class="triangledown"></div> -->
                            </div>
                            <div class="bottom_info_b">
                                <div class="totlecount">{{ longinsureajzs }}</div>
                                <!-- <div class="upcount">+1</div> -->
                            </div>
                        </div>
                        <div class="bottom_info">
                            <div class="bottom_info_t">
                                <div class="t_text">总撤案数</div>
                                <!-- <div class="triangleup"></div>
                                <div class="triangledown" v-show="false"></div> -->
                            </div>
                            <div class="bottom_info_b">
                                <div class="totlecount">{{ longinsurezcas }}</div>
                                <!-- <div class="upcount">+1</div> -->
                            </div>
                        </div>
                        <div class="bottom_info">
                            <div class="bottom_info_t">
                                <div class="t_text">总撤案率</div>
                                <!-- <div class="triangleup"></div>
                                <div class="triangledown" v-show="false"></div> -->
                            </div>
                            <div class="bottom_info_b">
                                <div class="totlecount">{{ longinsurezcal }}</div>
                            </div>
                        </div>
                        <div class="bottom_info">
                            <div class="bottom_info_t">
                                <div class="t_text">总理赔率</div>
                                <!-- <div class="triangleup"></div>
                                <div class="triangledown" v-show="false"></div> -->
                            </div>
                            <div class="bottom_info_b">
                                <div class="totlecount">{{ longinsurezlpl }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="claimSettlementBoardboxitem dayclaimSettlementBoardbox">
                    <div class="claimSettlementBoardboxitem_top">
                        <div class="topinsurename">日日保理赔</div>
                        <div @click="todayInsureAmountofincrease" class="gradientset">
                            <span>涨价梯度设置 ></span><img src="" alt="" />
                        </div>
                    </div>
                    <div class="claimSettlementBoardboxitem_bottom">
                        <div class="bottom_info">
                            <div class="bottom_info_t">
                                <div class="t_text">总案件数</div>
                                <!-- <div class="triangleup" v-show="false"></div>
                                <div class="triangledown"></div> -->
                            </div>
                            <div class="bottom_info_b">
                                <div class="totlecount">{{ dayinsureajzs }}</div>
                                <!-- <div class="upcount">+1</div> -->
                            </div>
                        </div>
                        <div class="bottom_info">
                            <div class="bottom_info_t">
                                <div class="t_text">总撤案数</div>
                                <!-- <div class="triangleup"></div>
                                <div class="triangledown" v-show="false"></div> -->
                            </div>
                            <div class="bottom_info_b">
                                <div class="totlecount">{{ dayinsurezcas }}</div>
                                <!-- <div class="upcount">+1</div> -->
                            </div>
                        </div>
                        <div class="bottom_info">
                            <div class="bottom_info_t">
                                <div class="t_text">总撤案率</div>
                                <!-- <div class="triangleup"></div>
                                <div class="triangledown" v-show="false"></div> -->
                            </div>
                            <div class="bottom_info_b">
                                <div class="totlecount">{{ dayinsurezcal }}</div>
                            </div>
                        </div>
                        <div class="bottom_info">
                            <div class="bottom_info_t">
                                <div class="t_text">总理赔率</div>
                                <!-- <div class="triangleup"></div>
                                <div class="triangledown" v-show="false"></div> -->
                            </div>
                            <div class="bottom_info_b">
                                <div class="totlecount">{{ dayinsurezlpl }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="claimSettlementBoardboxitem gcpaclaimSettlementBoardbox">
                    <div class="claimSettlementBoardboxitem_top">
                        <div class="topinsurename">团意日保理赔</div>
                        <div></div>
                    </div>
                    <div class="claimSettlementBoardboxitem_bottom">
                        <div class="bottom_info">
                            <div class="bottom_info_t">
                                <div class="t_text">总案件数</div>
                                <!-- <div class="triangleup" v-show="false"></div>
                                <div class="triangledown"></div> -->
                            </div>
                            <div class="bottom_info_b">
                                <div class="totlecount">{{ tyrbinsureajzs }}</div>
                                <!-- <div class="upcount">+1</div> -->
                            </div>
                        </div>
                        <div class="bottom_info">
                            <div class="bottom_info_t">
                                <div class="t_text">总撤案数</div>
                                <!-- <div class="triangleup"></div>
                                <div class="triangledown" v-show="false"></div> -->
                            </div>
                            <div class="bottom_info_b">
                                <div class="totlecount">{{ tyrbinsurezcas }}</div>
                                <!-- <div class="upcount">+1</div> -->
                            </div>
                        </div>
                        <div class="bottom_info">
                            <div class="bottom_info_t">
                                <div class="t_text">总撤案率</div>
                                <!-- <div class="triangleup"></div>
                                <div class="triangledown" v-show="false"></div> -->
                            </div>
                            <div class="bottom_info_b">
                                <div class="totlecount">{{ tyrbinsurezcal }}</div>
                            </div>
                        </div>
                        <div class="bottom_info">
                            <div class="bottom_info_t">
                                <div class="t_text">总理赔率</div>
                                <!-- <div class="triangleup"></div>
                                <div class="triangledown" v-show="false"></div> -->
                            </div>
                            <div class="bottom_info_b">
                                <div class="totlecount">{{ tyrbinsurezlpl }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tabcontent">
                <el-tabs
                    v-model="tabactiveName"
                    class="demo-tabs"
                    @tab-click="handleClick"
                >
                    <el-tab-pane label="长期保" name="1">
                        <div class="formbox">
                            <div class="formitem">
                                <div class="formcoutent">
                                    <div class="formlable">派遣单位：</div>
                                    <el-input
                                        placeholder="请输入派遣单位"
                                        @input="changelonginsureservicecompanyname"
                                        style="width: 300px"
                                        v-model="longinsureservicecompanyname"
                                    ></el-input>
                                </div>
                                <div>
                                    <el-button
                                        type="primary"
                                        size="default"
                                        class="my_btn"
                                        @click="exportlong"
                                        ><el-icon> <Upload /> </el-icon
                                        >导出列表</el-button
                                    >
                                </div>
                            </div>
                            <div class="formitem">
                                <div class="formcoutent">
                                    <div class="formlable">理赔状态：</div>
                                    <el-radio-group
                                        @change="getlonginsureRateofclaimlist"
                                        v-model="longclaimRateQuery"
                                    >
                                        <el-radio label="">全部</el-radio>
                                        <el-radio label="0">无理赔</el-radio>
                                        <el-radio label="1">有理赔</el-radio>
                                    </el-radio-group>
                                </div>
                                <div></div>
                            </div>
                            <div class="formitem">
                                <div class="formcoutent">
                                    <div class="formlable">操作状态：</div>
                                    <el-radio-group
                                        @change="getlonginsureRateofclaimlist"
                                        v-model="longinsurestatus"
                                    >
                                        <el-radio label="">全部</el-radio>
                                        <el-radio label="0">未拒保</el-radio>
                                        <el-radio label="1">拒保</el-radio>
                                    </el-radio-group>
                                </div>
                                <div></div>
                            </div>
                        </div>
                        <el-table
                            :data="longinsuretableData"
                            style="width: 100%; margin-top: 16px"
                            :header-cell-style="{
                                background: '#FAFAFC',
                                color: '#202536',
                            }"
                        >
                            <el-table-column prop="name" label="派遣单位" width="200" />
                            <el-table-column prop="allStaffCount" label="累计在保" />
                            <el-table-column prop="staffCount" label="当前在保" />
                            <el-table-column prop="caseAmount" label="案件数" />
                            <el-table-column prop="caseCancelAmount" label="撤案数" />
                            <el-table-column prop="refuseAmount" label="驳回数" />
                            <el-table-column prop="finalAmount" label="结案数" />
                            <el-table-column prop="estimateMoney" label="预估金额" />
                            <el-table-column prop="finalMoney" label="结案金额" />
                            <el-table-column label="理赔状态">
                                <template #default="scope">
                                    {{
                                        scope.row.claimRate === null ||
                                        scope.row.claimRate === "0%"
                                            ? "无理赔"
                                            : "有理赔"
                                    }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="claimRate" label="理赔率" />
                            <!-- <el-table-column prop="beConfirmedCount" label="待生效" /> -->
                            <el-table-column
                                prop="occupationName"
                                label="工种"
                                width="400"
                            >
                                <template #default="scope">
                                    {{
                                        scope.row.occupationName === null ||
                                        scope.row.occupationName === ""
                                            ? "--"
                                            : scope.row.occupationName
                                    }}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作状态">
                                <template #default="scope">
                                    <span v-show="scope.row.status === 0">--</span>
                                    <span v-show="scope.row.status === 1" class="gray"
                                        >已拒保</span
                                    >
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template #default="scope">
                                    <span
                                        v-show="
                                            scope.row.status === 0 ||
                                            scope.row.status === null
                                        "
                                        class="red pointer"
                                        @click="refuselong(scope.row)"
                                        >拒保</span
                                    >
                                </template>
                            </el-table-column>
                        </el-table>
                        <pagination
                            :total="longinsuretotal"
                            :currentPage="longinsurepagenum"
                            :pageSize="longinsurepagesize"
                            @SizeChange="changelonginsurepagesize"
                            @CurrentChange="changelonginsurepagenum"
                        ></pagination>
                    </el-tab-pane>
                    <el-tab-pane label="日日保" name="2">
                        <div class="formbox">
                            <div class="formitem">
                                <div class="formcoutent">
                                    <div class="formlable">派遣单位：</div>
                                    <el-input
                                        placeholder="请输入派遣单位"
                                        @input="changedayinsureservicecompanyname"
                                        style="width: 300px"
                                        v-model="dayinsureservicecompanyname"
                                    ></el-input>
                                </div>
                                <div>
                                    <el-button
                                        type="primary"
                                        size="default"
                                        class="my_btn"
                                        @click="exportday"
                                        ><el-icon> <Upload /> </el-icon
                                        >导出列表</el-button
                                    >
                                </div>
                            </div>
                            <div class="formitem">
                                <div class="formcoutent">
                                    <div class="formlable">理赔状态：</div>
                                    <el-radio-group
                                        @change="getdayinsureRateofclaimlist"
                                        v-model="dayclaimRateQuery"
                                    >
                                        <el-radio label="">全部</el-radio>
                                        <el-radio label="0">无理赔</el-radio>
                                        <el-radio label="1">有理赔</el-radio>
                                    </el-radio-group>
                                </div>
                                <div></div>
                            </div>
                            <div class="formitem">
                                <div class="formcoutent">
                                    <div class="formlable">操作状态：</div>
                                    <el-radio-group
                                        @change="getdayinsureRateofclaimlist"
                                        v-model="dayinsurestatus"
                                    >
                                        <el-radio label="">全部</el-radio>
                                        <el-radio label="0">未拒保</el-radio>
                                        <el-radio label="1">拒保</el-radio>
                                    </el-radio-group>
                                </div>
                                <div></div>
                            </div>
                        </div>
                        <el-table
                            :data="dayinsuretableData"
                            style="width: 100%; margin-top: 16px"
                            :header-cell-style="{
                                background: '#FAFAFC',
                                color: '#202536',
                            }"
                        >
                            <el-table-column prop="name" label="派遣单位" />
                            <el-table-column prop="roleName" label="理赔状态">
                                <template #default="scope">
                                    {{
                                        scope.row.claimRate === null ||
                                        scope.row.claimRate === "0%"
                                            ? "无理赔"
                                            : "有理赔"
                                    }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="allStaffCount" label="累计投保" />
                            <!-- <el-table-column prop="staffCount" label="当前在保" /> -->
                            <el-table-column prop="caseAmount" label="案件数" />
                            <el-table-column prop="caseCancelAmount" label="撤案数" />
                            <el-table-column prop="caseCancelRate" label="撤案率" />
                            <el-table-column prop="refuseAmount" label="驳回数" />
                            <el-table-column prop="finalMoney" label="结案金额" />
                            <el-table-column prop="estimateMoney" label="预估金额" />
                            <el-table-column prop="claimRate" label="理赔率" />
                            <el-table-column prop="occupationName" label="工种">
                                <template #default="scope">
                                    {{
                                        scope.row.occupationName === null ||
                                        scope.row.occupationName === ""
                                            ? "--"
                                            : scope.row.occupationName
                                    }}
                                </template>
                            </el-table-column>
                            <!-- <el-table-column prop="staffCount" label="共投保人次" /> -->
                            <el-table-column prop="area" label="地区">
                                <template #default="scope">
                                    {{
                                        scope.row.area === null || scope.row.area === ""
                                            ? "--"
                                            : scope.row.area
                                    }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="status" label="操作状态">
                                <template #default="scope">
                                    <span
                                        v-show="
                                            scope.row.status === 0 ||
                                            scope.row.status === null
                                        "
                                        >--</span
                                    >
                                    <span v-show="scope.row.status === 1" class="gray"
                                        >已拒保</span
                                    >
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" fixed="right">
                                <template #default="scope">
                                    <span
                                        v-show="
                                            scope.row.status === 0 ||
                                            scope.row.status === null
                                        "
                                        class="red pointer"
                                        @click="refuseday(scope.row)"
                                        >拒保</span
                                    >
                                </template>
                            </el-table-column>
                        </el-table>
                        <pagination
                            :total="dayinsuretotal"
                            :currentPage="dayinsurepagenum"
                            :pageSize="dayinsurepagesize"
                            @SizeChange="changedayinsurepagesize"
                            @CurrentChange="changedayinsurepagenum"
                        ></pagination>
                    </el-tab-pane>
                    <el-tab-pane label="团意日保" name="3">
                        <div class="formbox">
                            <div class="formitem">
                                <div class="formcoutent">
                                    <div class="formlable">派遣单位：</div>
                                    <el-input
                                        placeholder="请输入派遣单位"
                                        @input="changetyrbinsureservicecompanyname"
                                        style="width: 300px"
                                        v-model="tyrbinsureservicecompanyname"
                                    ></el-input>
                                </div>
                                <div>
                                    <el-button
                                        type="primary"
                                        size="default"
                                        class="my_btn"
                                        @click="exporttyrb"
                                        ><el-icon> <Upload /> </el-icon
                                        >导出列表</el-button
                                    >
                                </div>
                            </div>
                            <div class="formitem">
                                <div class="formcoutent">
                                    <div class="formlable">理赔状态：</div>
                                    <el-radio-group
                                        @change="gettyrbinsureRateofclaimlist"
                                        v-model="tyrbclaimRateQuery"
                                    >
                                        <el-radio label="">全部</el-radio>
                                        <el-radio label="0">无理赔</el-radio>
                                        <el-radio label="1">有理赔</el-radio>
                                    </el-radio-group>
                                </div>
                                <div></div>
                            </div>
                            <div class="formitem">
                                <div class="formcoutent">
                                    <div class="formlable">操作状态：</div>
                                    <el-radio-group
                                        @change="gettyrbinsureRateofclaimlist"
                                        v-model="tyrbinsurestatus"
                                    >
                                        <el-radio label="">全部</el-radio>
                                        <el-radio label="0">未拒保</el-radio>
                                        <el-radio label="1">拒保</el-radio>
                                    </el-radio-group>
                                </div>
                                <div></div>
                            </div>
                        </div>
                        <el-table
                            :data="tyrbinsuretableData"
                            style="width: 100%; margin-top: 16px"
                            :header-cell-style="{
                                background: '#FAFAFC',
                                color: '#202536',
                            }"
                        >
                            <el-table-column prop="name" label="派遣单位" />
                            <el-table-column prop="roleName" label="理赔状态">
                                <template #default="scope">
                                    {{
                                        scope.row.claimRate === null ||
                                        scope.row.claimRate === "0%"
                                            ? "无理赔"
                                            : "有理赔"
                                    }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="allStaffCount" label="累计投保" />
                            <el-table-column prop="staffCount" label="当前在保" />
                            <el-table-column prop="caseAmount" label="案件数" />
                            <el-table-column prop="caseCancelAmount" label="撤案数" />
                            <el-table-column prop="caseCancelRate" label="撤案率" />
                            <el-table-column prop="refuseAmount" label="驳回数" />
                            <el-table-column prop="finalMoney" label="结案金额" />
                            <el-table-column prop="estimateMoney" label="预估金额" />
                            <el-table-column prop="claimRate" label="理赔率" />
                            <el-table-column prop="occupationName" label="工种">
                                <template #default="scope">
                                    {{
                                        scope.row.occupationName === null ||
                                        scope.row.occupationName === ""
                                            ? "--"
                                            : scope.row.occupationName
                                    }}
                                </template>
                            </el-table-column>
                            <!-- <el-table-column prop="staffCount" label="共投保人次" /> -->
                            <el-table-column prop="area" label="地区">
                                <template #default="scope">
                                    {{
                                        scope.row.area === null || scope.row.area === ""
                                            ? "--"
                                            : scope.row.area
                                    }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="status" label="操作状态">
                                <template #default="scope">
                                    <span
                                        v-show="
                                            scope.row.status === 0 ||
                                            scope.row.status === null
                                        "
                                        >--</span
                                    >
                                    <span v-show="scope.row.status === 1" class="gray"
                                        >已拒保</span
                                    >
                                </template>
                            </el-table-column>
                        </el-table>
                        <pagination
                            :total="tyrbinsuretotal"
                            :currentPage="tyrbinsurepagenum"
                            :pageSize="tyrbinsurepagesize"
                            @SizeChange="changetyrbinsurepagesize"
                            @CurrentChange="changetyrbinsurepagenum"
                        ></pagination>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div v-if="curTab === 2">
            <compensateEnterPrise />
        </div>
        <div v-if="curTab === 3">
            <theBossClaimsTheOdds></theBossClaimsTheOdds>
        </div>
    </div>
</template>

<script setup lang="ts">
import crumbs from '../../components/crumbs.vue'
import { ref, reactive, computed, watch, onMounted, onActivated } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { TabsPaneContext } from 'element-plus'
import { GetDate, shake, wait } from '../../utils/utils'
import baseurl from '../../api/env'
import { ElMessage, ElMessageBox } from 'element-plus'
import compensateEnterPrise from './compensateEnterPrise.vue'
import theBossClaimsTheOdds from './theBossClaimsTheOdds.vue'
import {
    refusedayservicecompanynameapi,
    refuselongservicecompanynameapi,
    exporttyrbinsureRateofclaimapi,
    exportlonginsureRateofclaimapi,
    exportdayinsureRateofclaimapi,
    gettyrbinsureRateofclaimlistapi,
    getdayinsureRateofclaimlistapi,
    getlonginsureRateofclaimlistapi,
    gettopRateofclaimmsgapi,
} from '../../api/api'
const router = useRouter()
const route = useRoute()
const tabactiveName = ref('1')
onMounted(() => {
    // gettopRateofclaimmsg(1)
    // gettopRateofclaimmsg(2)
    // gettopRateofclaimmsg(3)
    // getlonginsureRateofclaimlist()
})
onActivated(() => {
    gettopRateofclaimmsg(1)
    gettopRateofclaimmsg(2)
    gettopRateofclaimmsg(3)
    getlonginsureRateofclaimlist()
})
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab.index)
    if (tab.index === '0') {
        getlonginsureRateofclaimlist()
    } else if (tab.index === '1') {
        getdayinsureRateofclaimlist()
    } else if (tab.index === '2') {
        gettyrbinsureRateofclaimlist()
    }
}
const refuseday = (val: any) => {
    console.log(val)
    refusedayserveCompanyName.value = val.name
    ElMessageBox.confirm('确定拒保吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            refusedayservicecompanyname()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消拒保',
            })
        })
}
const refuselong = (val: any) => {
    console.log(val)
    refuselongserveCompanyName.value = val.name
    ElMessageBox.confirm('确定拒保吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            refuselongservicecompanyname()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消拒保',
            })
        })
}
const refuselongservicecompanyname = async () => {
    const res: any = await refuselongservicecompanynameapi({
        serveCompanyName: refuselongserveCompanyName.value,
    })
    console.log(res, '长期保派遣单位拒保')
    if (res.code === 200) {
        ElMessage({
            type: 'success',
            message: '操作成功',
        })
        getlonginsureRateofclaimlist()
    }
}
const refusedayservicecompanyname = async () => {
    const res: any = await refusedayservicecompanynameapi({
        serveCompanyName: refusedayserveCompanyName.value,
    })
    console.log(res, '日日保派遣单位拒保')
    if (res.code === 200) {
        ElMessage({
            type: 'success',
            message: '操作成功',
        })
        getdayinsureRateofclaimlist()
    }
}
const refuselongserveCompanyName = ref('')
const refusedayserveCompanyName = ref('')
const exportlonginsureRateofclaim = async () => {
    console.log(1111, longinsureservicecompanyname.value)
    const res: any = await exportlonginsureRateofclaimapi({
        type: 3,
        status: longinsurestatus.value,
        claimRateQuery: longclaimRateQuery.value,
        name: longinsureservicecompanyname.value,
    })
    console.log(res, '导出长期保')
    window.location.href = baseurl + '/common/download?delete=true&fileName=' + res
}
const exportdayinsureRateofclaim = async () => {
    const res: any = await exportdayinsureRateofclaimapi({
        type: 2,
        status: dayinsurestatus.value,
        claimRateQuery: dayclaimRateQuery.value,
        name: dayinsureservicecompanyname.value,
        insureCompanyType: 'insure002_gsc',
    })
    console.log(res, '导出日日保')
    window.location.href = baseurl + '/common/download?delete=true&fileName=' + res
}
const exporttyrbinsureRateofclaim = async () => {
    const res: any = await exporttyrbinsureRateofclaimapi({
        type: 2,
        status: tyrbinsurestatus.value,
        claimRateQuery: tyrbclaimRateQuery.value,
        name: tyrbinsureservicecompanyname.value,
        insureCompanyType: 'wesure004_rb',
    })
    console.log(res, '导出日日保')
    window.location.href = baseurl + '/common/download?delete=true&fileName=' + res
}
const exportday = () => {
    exportdayinsureRateofclaim()
}
const exportlong = () => {
    exportlonginsureRateofclaim()
}
const exporttyrb = () => {
    exporttyrbinsureRateofclaim()
}
const changelonginsureservicecompanyname = (val: any) => {
    console.log(val)
    shake(getlonginsureRateofclaimlist, 400)
}
const changedayinsureservicecompanyname = (val: any) => {
    console.log(val)
    shake(getdayinsureRateofclaimlist, 400)
}
const changetyrbinsureservicecompanyname = (val: any) => {
    console.log(val)
    shake(gettyrbinsureRateofclaimlist, 400)
}
const getlonginsureRateofclaimlist = async () => {
    const res: any = await getlonginsureRateofclaimlistapi({
        type: 3,
        pageSize: longinsurepagesize.value,
        pageNum: longinsurepagenum.value,
        status: longinsurestatus.value,
        claimRateQuery: longclaimRateQuery.value,
        name: longinsureservicecompanyname.value,
    })
    console.log(res, '长期保理赔率列表')
    longinsuretableData.value = res.rows
    longinsuretotal.value = res.total
}
const longinsureservicecompanyname = ref('')
const longinsurepagesize = ref(10)
const longinsurepagenum = ref(1)
const longinsuretotal = ref(1)
const longinsurestatus = ref('')
const longclaimRateQuery = ref('')
const longinsuretableData = ref<any>([])
const changelonginsurepagenum = (val: any) => {
    longinsurepagenum.value = val
    getlonginsureRateofclaimlist()
}
const changelonginsurepagesize = (val: any) => {
    longinsurepagesize.value = val
    longinsurepagenum.value = 1
    getlonginsureRateofclaimlist()
}
const getdayinsureRateofclaimlist = async () => {
    const res: any = await getdayinsureRateofclaimlistapi({
        type: 2,
        pageSize: dayinsurepagesize.value,
        pageNum: dayinsurepagenum.value,
        status: dayinsurestatus.value,
        claimRateQuery: dayclaimRateQuery.value,
        name: dayinsureservicecompanyname.value,
    })
    console.log(res, '日日保理赔率列表')
    dayinsuretableData.value = res.rows
    dayinsuretotal.value = res.total
}
const dayinsureservicecompanyname = ref('')
const dayinsurepagesize = ref(10)
const dayinsurepagenum = ref(1)
const dayinsuretotal = ref(1)
const dayinsurestatus = ref('')
const dayclaimRateQuery = ref('')
const dayinsuretableData = ref<any>([])
const changedayinsurepagenum = (val: any) => {
    dayinsurepagenum.value = val
    getdayinsureRateofclaimlist()
}
const changedayinsurepagesize = (val: any) => {
    dayinsurepagesize.value = val
    dayinsurepagenum.value = 1
    getdayinsureRateofclaimlist()
}
const gettyrbinsureRateofclaimlist = async () => {
    const res: any = await gettyrbinsureRateofclaimlistapi({
        type: 2,
        pageSize: tyrbinsurepagesize.value,
        pageNum: tyrbinsurepagenum.value,
        status: tyrbinsurestatus.value,
        claimRateQuery: tyrbclaimRateQuery.value,
        name: tyrbinsureservicecompanyname.value,
    })
    console.log(res, '团意日保理赔率列表')
    tyrbinsuretableData.value = res.rows
    tyrbinsuretotal.value = res.total
}
const tyrbinsureservicecompanyname = ref('')
const tyrbinsurepagesize = ref(10)
const tyrbinsurepagenum = ref(1)
const tyrbinsuretotal = ref(1)
const tyrbinsurestatus = ref('')
const tyrbclaimRateQuery = ref('')
const tyrbinsuretableData = ref<any>([])
const changetyrbinsurepagenum = (val: any) => {
    tyrbinsurepagenum.value = val
    gettyrbinsureRateofclaimlist()
}
const changetyrbinsurepagesize = (val: any) => {
    tyrbinsurepagesize.value = val
    tyrbinsurepagenum.value = 1
    gettyrbinsureRateofclaimlist()
}
const gettopRateofclaimmsg = async (type: number) => {
    const res: any = await gettopRateofclaimmsgapi(type)
    if (type === 1) {
        console.log(res, '理赔率头部信息1')
        longinsureajzs.value = res.caseAmount
        longinsurezcas.value = res.caseCancelAmount
        longinsurezcal.value = res.caseCancelRate
        longinsurezlpl.value = res.claimRate
    } else if (type === 2) {
        console.log(res, '理赔率头部信息2')
        dayinsureajzs.value = res.caseAmount
        dayinsurezcas.value = res.caseCancelAmount
        dayinsurezcal.value = res.caseCancelRate
        dayinsurezlpl.value = res.claimRate
    } else if (type === 3) {
        console.log(res, '理赔率头部信息3')
        tyrbinsureajzs.value = res.caseAmount
        tyrbinsurezcas.value = res.caseCancelAmount
        tyrbinsurezcal.value = res.caseCancelRate
        tyrbinsurezlpl.value = res.claimRate
    }
}
const longinsureajzs = ref(0)
const longinsurezcas = ref(0)
const longinsurezcal = ref('')
const longinsurezlpl = ref('')
const dayinsureajzs = ref(0)
const dayinsurezcas = ref(0)
const dayinsurezcal = ref('')
const dayinsurezlpl = ref('')
const tyrbinsureajzs = ref(0)
const tyrbinsurezcas = ref(0)
const tyrbinsurezcal = ref('')
const tyrbinsurezlpl = ref('')
const todayInsureAmountofincrease = () => {
    router.push({ path: '/dayInsureAmountofincrease' })
}
const back = () => {
    window.history.back()
}

const curTab = ref(1)

const changeTab = (tab: number) => {
    curTab.value = tab
}
</script>

<style scoped lang="scss">
.formbox {
    width: 100%;
    box-sizing: border-box;

    .formitem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;

        .formcoutent {
            display: flex;
            align-items: center;

            .formlable {
                font-size: 14px;
                color: #202536;
            }
        }
    }
}

.tabcontent {
    margin-top: 16px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    background-color: #ffffff;
    padding: 16px 24px;
}

.claimSettlementBoardbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;

    .claimSettlementBoardboxitem {
        flex: 1;
        margin-right: 16px;
        border-radius: 8px;
        background-color: #ffffff;
        min-height: 128px;

        .claimSettlementBoardboxitem_top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 16px;
            border-bottom: 1px solid #f4f4f7;

            .gradientset {
                color: #9497b1;
                font-size: 12px;
                cursor: pointer;
            }
        }

        .claimSettlementBoardboxitem_bottom {
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 16px 0;

            .bottom_info {
                flex: 1;
                box-sizing: border-box;
                border-right: 1px solid #f4f4f7;
                padding: 0 16px;

                .bottom_info_t {
                    display: flex;
                    align-items: center;

                    .t_text {
                        font-size: 12px;
                        color: #9497b1;
                    }

                    .triangleup {
                        width: 0px;
                        height: 0px;
                        border-top: 6px solid transparent;
                        border-right: 6px solid transparent;
                        border-bottom: 6px solid #ff7642;
                        border-left: 6px solid transparent;
                        margin-top: -6px;
                        margin-left: 5px;
                    }

                    .triangledown {
                        width: 0px;
                        height: 0px;
                        border-top: 6px solid #00d679;
                        border-right: 6px solid transparent;
                        border-bottom: 6px solid transparent;
                        border-left: 6px solid transparent;
                        margin-bottom: -6px;
                        margin-left: 5px;
                    }
                }

                .bottom_info_b {
                    display: flex;
                    align-items: center;
                    margin-top: 9px;

                    .totlecount {
                        color: #3d3d3d;
                        font-size: 22px;
                        font-weight: 700;
                    }

                    .upcount {
                        margin-top: 7px;
                        margin-left: 2px;
                        color: #ffa814;
                        font-size: 12px;
                    }
                }
            }
        }
    }

    .gcpaclaimSettlementBoardbox {
        margin-right: 0;
    }
}

.paddingbox {
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    position: relative;
    z-index: 120;
}

.red {
    color: red;
}

.gray {
    color: #9497b1;
}

.pointer {
    cursor: pointer;
}

.tab-box {
    gap: 8px;
    margin-top: 46px;
    margin-left: 15px;
    margin-bottom: -6px;

    .tab-item {
        width: 150px;
        height: 52px;
        line-height: 52px;
        background: rgba(2, 86, 255, 0.1);
        border-radius: 10px 10px 0 0;
        text-align: center;
        position: relative;
    }

    .name {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 100;
        width: 100%;
    }

    .active {
        color: #3e5ff5;
        font-weight: bold;
        border-bottom: none;
        background: linear-gradient(
            180deg,
            #0256ff 0%,
            rgba(255, 255, 255, 0) 77%,
            rgba(255, 255, 255, 0) 79%
        );
        position: relative;

        &::after {
            content: "";
            position: absolute;
            left: 1px;
            top: 1px;
            width: calc(100% - 2px);
            height: calc(100% - 2px);
            background: #fff;
            border-radius: 8px 8px 0 0;
        }
    }
}
</style>
